{% extends 'admin_panel/base.html' %}

{% block title %}用户管理 - 旅行记录管理系统{% endblock %}
{% block page_title %}用户管理{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">用户列表</h5>
        <div class="d-flex">
            <!-- 搜索表单 -->
            <form method="get" class="search-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="搜索用户名、邮箱..." 
                           value="{{ search_query }}">
                    <button class="btn btn-outline-secondary" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <div class="card-body">
        {% if users %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>姓名</th>
                        <th>注册时间</th>
                        <th>旅行记录</th>
                        <th>评论数</th>
                        <th>点赞数</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>
                            <strong>{{ user.username }}</strong>
                            {% if user.is_superuser %}
                            <span class="badge bg-danger ms-1">超级管理员</span>
                            {% elif user.groups.all %}
                            <span class="badge bg-info ms-1">管理员</span>
                            {% endif %}
                        </td>
                        <td>{{ user.email|default:"未设置" }}</td>
                        <td>
                            {% if user.first_name or user.last_name %}
                            {{ user.first_name }} {{ user.last_name }}
                            {% else %}
                            <span class="text-muted">未设置</span>
                            {% endif %}
                        </td>
                        <td>{{ user.date_joined|date:"Y-m-d H:i" }}</td>
                        <td>
                            <span class="badge bg-primary">{{ user.travel_count }}</span>
                        </td>
                        <td>
                            <span class="badge bg-info">{{ user.comment_count }}</span>
                        </td>
                        <td>
                            <span class="badge bg-success">{{ user.like_count }}</span>
                        </td>
                        <td>
                            {% if user.is_active %}
                            <span class="badge bg-success">活跃</span>
                            {% else %}
                            <span class="badge bg-secondary">禁用</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        {% if is_paginated %}
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}">上一页</a>
                </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                <li class="page-item {% if page_obj.number == num %}active{% endif %}">
                    <a class="page-link" href="?page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}">{{ num }}</a>
                </li>
                {% endfor %}

                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}

        {% else %}
        <div class="text-center py-5">
            <i class="bi bi-people display-1 text-muted"></i>
            <p class="text-muted mt-3">暂无用户数据</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- 统计信息 -->
<div class="row mt-4">
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-primary">{{ users.paginator.count }}</h3>
                <p class="text-muted mb-0">总用户数</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-success">{{ active_users_count }}</h3>
                <p class="text-muted mb-0">活跃用户</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-info">{{ admin_users_count }}</h3>
                <p class="text-muted mb-0">管理员用户</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 添加一些用户管理的交互功能
document.addEventListener('DOMContentLoaded', function() {
    // 可以在这里添加用户管理的交互功能
    console.log('用户管理页面加载完成');
});
</script>
{% endblock %}
